<template>
  <div>
    <div v-transfer-dom>
      <previewer
        :list="imgList"
        ref="previewer"
        @on-index-change="logIndexChange"
        @on-close="close"
      ></previewer>
    </div>
  </div>
</template>
<script>
import { TransferDom, Previewer } from "vux";
export default {
  directives: {
    TransferDom
  },
  components: {
    Previewer
  },
  data() {
    return {
      options: {
        getThumbBoundsFn(index) {
          let thumbnail = document.querySelectorAll(".previewer-demo-img")[
            index
          ];
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop;
          let rect = thumbnail.getBoundingClientRect();
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
        }
      }
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default: []
    }
  },
  watch:{
    show () {
      if (this.show) {
        this.$nextTick(e=>{
          this.$refs.previewer.show(this.index)
        })
      }
    }
  },
  computed: {
    imgList() {
      let list = this.list.map(src => {
        return {
          src
        };
      });
      return list;
    }
  },
  methods: {
    close() {
      this.$emit("update:show", false);
    },
    logIndexChange(arg) {
      this.$emit("logIndexChange", arg);
    }
  }
};
</script>
<style lang="less">
.show-img-dialog {
  .img-close {
    text-align: right;
    margin-right: 24px;
    margin-top: 30px;
  }
  .show-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
    img {
      max-width: 100%;
      height: auto;
    }
  }
  .mark {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>
